<template>
  <div class="hazard">
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between">
          <n-tab :options="tabOptions" @click="tabCheckHandler"/>
        </div>
        
        <data-table ref="dataTable"
                :api="getTableData"
                :options="options"
                :columns="columns"
                :operates="operates"
                :query="models.selectFormModel"
                @handle-selection-change="handleSelectionChange" lazy></data-table>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import {Component, Vue,Ref} from 'vue-property-decorator';
import NTab from "@/components/NTab.vue";
import DataTable from "@/components/DataTable/DataTable.vue";
import { simpleStartList} from '@/api/investWork';
import {getReportList,haveCategory,approvalFinish,report,reportBack} from "@/api/dataApproval"

@Component({
  methods: {},
  components: {DataTable,NTab}
})
export default class dataReportManager extends Vue {

  @Ref('dataTable') dataTable!:any;
  @Ref('areaTreeSelect') areaTreeSelect!:any;

  getTableData:any;
  tabItem!:any;
  workData!:any;

  models:any={
    selectFormModel:{
      bigCategoryId:'',
      workId:null,
    }
  }

  columns: any = [
  {
      label: 'ID',
      prop: 'id',
      hide: true
    },
    {
      label: '区划名称',
      prop: 'areaName',
    },
    {
      label: '区划编码',
      prop: 'areaCode',
      width: 80
    },
    {
      label: '类别名称',
      prop: 'categoryName'
    },
    {
      label: '调查对象(数量/质检/未质检）',
      prop: 'investCount',
      width: 180,
      render: this.investDataRender
    },
    {
      label: '审核情况(总量/通过/驳回)',
      prop: 'approval',
      width: 180,
      render: this.approvalRender
    },
    {
      label: '调查类存在',
      prop: 'haveCategory',
      width: 100,
      render: this.haveCategoryRender
    },
    {
      label: '质检结果',
      prop: 'checkStatusName',
      width: 100,
      render: this.checkResultRender
    },
    {
      label: '审核状态',
      prop: 'approvalStatusName',
      width: 100,
      render: this.approvalStatusRender
    },
    {
      label: '上报状态',
      prop: 'statusName',
      width: 100,
      render: this.reportButtonRender
    },
    {
      label: '上报时间',
      prop: 'reportTime',
      width: 100
    },
  ];
  tabOptions:any=[]

  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: true, // 是否支持列表项选中功能
  };

  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: []
  };

  tabCheckHandler(data){
    this.getTableData = getReportList;
    this.models.selectFormModel.workId = data.item.id;
    this.dataTable.refreshData(getReportList);
  }

  reportButtonRender(createElement,row){
    return createElement('el-switch', {
          props: {
            value:row.row.status,
            activeValue:"1",
            inactiveValue:"0",
            activeColor: '#13ce66',
            inactiveColor: '#ff4949',
          },
          on:{
            change:(val) => this.handleReportClick(row.row, val)
          }
        });

  }

  investDataRender(createElement,row){
    return  createElement('span', [
      createElement('span',{
        style:{
          color:'blue'
        }
      },[
        row.row.investCount
      ]),
      "/",
      createElement('span',{
        style:{
          color:'green'
        }
      },[
        row.row.checkPassCount
      ]),
      "/",
      createElement('span',{
        style:{
          color:'red'
        }
      },[
        row.row.checkNotPassCount
      ])
    ]);
  }

  approvalRender(createElement,row){
    return  createElement('span', [
      createElement('span',{
        style:{
          color:'blue'
        }
      },[
        row.row.approvalCount
      ]),
      "/",
      createElement('span',{
        style:{
          color:'green'
        }
      },[
        row.row.approvalPassCount
      ]),
      "/",
      createElement('span',{
        style:{
          color:'red'
        }
      },[
        row.row.approvalNotPassCount
      ])
    ]);
  }

  approvalStatusRender(createElement,row){
      return createElement('el-switch', {
          props: {
            value:row.row.approvalStatus,
            activeValue:"1",
            inactiveValue:"0",
            activeColor: '#13ce66',
            inactiveColor: '#ff4949',
          },
          on:{
            change:(val) => this.handleApprovalChange(row.row, val),
          }
        });
  }

  checkResultRender(createElement,row){
      return createElement('el-switch', {
          props: {
            value: row.row.checkStatus,
            activeValue:"1",
            inactiveValue:"0",
            activeColor: '#13ce66',
            inactiveColor: '#ff4949',
            disabled:true
          }
        });
  }

  haveCategoryRender(createElement,row){
      return createElement('el-switch', {
          props: {
            value:row.row.haveCategory,
            activeValue:"1",
            inactiveValue:"0",
            activeColor: '#13ce66',
            inactiveColor: '#ff4949',
          },
          on:{
            change:(val) => this.handleSwitchChange(row.row, val),
          }
        });
  }

  handleReportClick(row,val){
    if(val ==='1'){
      this.$confirm(`确认上报当前类别【${row.categoryName}】吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return report({id:row.id});
      }).then((res: any) => {
        row.status=val;
        this.$message.success(res.msg);
        this.dataTable.refresh();
      }).catch((e) => {
        console.error(e);
      });

    }else{
      this.$confirm(`确认取消上报当前类别【${row.categoryName}】码？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return reportBack({id:row.id});
      }).then((res: any) => {
        row.status=val;
        this.$message.success(res.msg);
        this.dataTable.refresh();
      }).catch((e) => {
        console.error(e);
      });
    }
  }
  
  private handleSelectionChange(val) {
    console.log(val);
  }
  handleApprovalChange(row,val){

    this.$confirm(`确认审批完成类别【${row.categoryName}】吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return  approvalFinish({id:row.id,status:val});
      }).then((res: any) => {
        row.approvalStatus =val;
        this.$message.success(res.msg);
      }).catch((e) => {
        console.error(e);
      });
  }

  handleSwitchChange(row,val){

    this.$confirm(`确认修改类别【${row.categoryName}】吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return  haveCategory({id:row.id,haveCategory:val});
      }).then((res: any) => {
        row.haveCategory =val;
        this.$message.success(res.msg);
      }).catch((e) => {
        console.error(e);
      });

  }

  mounted(){
    simpleStartList().then(res =>{
      this.workData =res.data;
      this.workData.forEach(wd =>{
        this.tabOptions.push({label:wd.name,id:wd.id});
      })
 
      this.tabCheckHandler({item:this.tabOptions[0]});
    });
    (this as any).$bus.$on('categoryCheckedHandler',(item:any) =>{
      this.models.selectFormModel.bigCategoryId = item.id;
      if(this.models.selectFormModel.workId){
        this.dataTable.refresh();
      }
     
    });
  }
}
</script>
<style lang="scss" scoped>
.hazard{
  display: flex;
  gap: 10px;
  .ha-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .radio-t{
      display: flex;
      align-items: center;
      gap: 6px;
      span{
        font-size: 14px;
      }
    }
  }
}
.el-tree-select {
    height: 30px !important; /* 调整为你需要的高度 */
    input{
      height: 30px !important; /* 调整为你需要的高度 */
    }
}
.el-input__inner{
  height: 30px !important; /* 调整为你需要的高度 */
}
::v-deep .el-card__header {
  padding: 0px 20px 0px 6px;
}

::v-deep .el-card__body{
  padding: 6px 20px 0px 6px;
}
</style>
